<template>
  <div class="detailMsg" ref="detailMsg">
    <div class="detailMsg-head-fixed" ref="header">
      <div class="title">
        <span>{{ title }}</span>
      </div>
      <div class="detailMsg-draw">
        <img
          class="msgClose"
          src="../../assets/images/close.png"
          @click="close"
          alt=""
        />
      </div>
      <div class="detailMsg-head">
        <ul>
          <li v-if="!isNoDate">序号</li>
          <li v-for="(item, index) in headTitle" :key="index">{{ item }}</li>
        </ul>
      </div>
    </div>
    <div class="detailMsg-body" ref="body">
      <no-data-tips v-if="isNoDate"></no-data-tips>
      <div class="detailMsg-body-1">
        <ul v-for="(item, index) in content" :key="index" @click="ulClick">
          <li>{{ index + 1 }}</li>
          <li v-for="(subItem, index) in item" :key="index">{{ subItem }}</li>
          <!-- <li>{{item}}</li> -->
        </ul>
      </div>
    </div>
    <pagination
      v-if="isShowPagination"
      :top="top"
      @handleCCurrentChange="handleCCurrentChange"
      @handleCSizeChange="handleCSizeChange"
      :total="total"
      :currentPage="currentPage"
      :pageSize="pageSize"
    ></pagination>
  </div>
</template>
<script>
// 表格中显示没有数据的tip
import noDataTips from "../table/noDataTips.vue";
// 分页
import pagination from "./m-pagination.vue";
export default {
  name: "msg",
  props: {
    title: {
      type: String,
      default: "",
      require: true,
    },
    isNoDate: {
      type: Boolean,
      default: true,
      require: true,
    },
    headTitle: {
      require: true,
    },
    content: {
      require: true,
    },
    isShowPagination: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    noDataTips,
    pagination,
  },
  data() {
    return {
      dom: "",
      items: {
        detailTitle: "",
        detailTime: "",
        detailContent: "",
        detailCountry: "",
      },
      top: "",
      // 总页数
      total: 0,
      currentPage: 1,
      pageSize: 10,
    };
  },
  created() {},
  mounted() {
    this.computeTop();
    this.total = this.$store.getters.getCTotal;
    this.currentPage = this.$store.getters.getCCurrentPage;
    this.pageSize = this.$store.getters.getCPageSize;
  },
  watch: {},
  updated() {
    this.computeTop();
  },
  methods: {
    computeTop() {
      this.top =
        this.$refs.header.offsetHeight + this.$refs.body.offsetHeight + "px";
    },
    close() {
      this.$emit("close", false);
    },
    ulClick(event) {
      if (this.dom) {
        this.dom.style.backgroundColor = "transparent";
      }
      event.currentTarget.style.backgroundColor = "rgb(61, 192, 254)";
      this.dom = event.currentTarget;
      this.items.detailTitle = event.currentTarget.children[2].innerHTML;
      this.items.detailTime = event.currentTarget.children[4].innerHTML;
      this.items.detailContent = event.currentTarget.children[3].innerHTML;
      this.items.detailCountry = event.currentTarget.children[1].innerHTML;
      this.$store.commit("changeOutBrebkInfoDetail", this.items);
      this.$emit("isShowOutBreakInfoDetail", true);
    },
    handleCCurrentChange(val) {
      this.$store.commit("changeCCurrentPage", val);
    },
    handleCSizeChange(val) {
      this.$store.commit("changeCPageSize", val);
    },
  },
};
</script>
<style lang="less" scoped>
</style>